<template>
  <div ref="echart" class="echart"></div>
</template>

<script>
export default {
  data() {
    return {
      echart: null
    }
  },
  mounted() {
    this.initDta()
  },
  methods: {
    initDta() {
      this.echart = this.$echarts.init(this.$refs.echart)
      const option = {
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: '#0A1A42' }, // 设置颜色渐变
              { offset: 1, color: '#5166FD' },
            ],
          },
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: '#091B41' },
              { offset: 1, color: '#3BFDFB' },
            ],
          },
        ],
        title: {
          text: '单位 ： 艘次',
          top: '5',
          right: '20',
          show: true,
          textStyle: {
            color: '#FFF',
            fontSize: 20,
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: 'red',
            },
          },
        },
        grid: {
          top: '22%',
          left: '5%',
          right: '18%',
          bottom: '3%',
          containLabel: true,
        },
        legend: {
          top: 'center',
          right: '3%',
          itemGap: 20,
          width: '10',
          textStyle: {
            color: '#FFF',
            fontSize: 18,
          },
        },
        xAxis: [
          {
            type: 'category',
            data: ['1月','2月','3月','4月'],
            axisPointer: {
              type: 'shadow',
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '',
            splitLine: {
              lineStyle: {
                color: '#2a3961',
              },
            },
          },
          {
            type: 'value',
            name: '',
            axisLabel: {
              formatter: '',
            },
            splitLine: {
              lineStyle: {
                color: '#2a3961',
              },
            },
          },
        ],
        series: [
          {
            name: '吞',
            type: 'bar',
            tooltip: {
              show: false,
              valueFormatter: function (value) {
                return value + ' 万吨'
              },
            },
            itemStyle: {
              borderColor: '#4C61FF',
            },
            data: [10,20,30,40],
          },
          {
            name: '吐',
            type: 'bar',
            tooltip: {
              show: false,
              valueFormatter: function (value) {
                return value + ' 万吨'
              },
            },
            itemStyle: {
              borderColor: '#2CC4CF',
            },
            data: [20,25,15,30],
          },
          {
            name: '吞',
            type: 'line',
            yAxisIndex: 1,
            lineStyle: {
              width: 3,
              color: '#4C61FF',
            },
            tooltip: {
              valueFormatter: function (value) {
                return value + ' 万吨'
              },
            },
            data: [10,20,30,40],
          },
          {
            name: '吐',
            type: 'line',
            yAxisIndex: 1,
            lineStyle: {
              width: 3,
              color: '#3CFFFD',
            },
            tooltip: {
              valueFormatter: function (value) {
                return value + ' 万吨'
              },
            },
            data: [20,25,15,30],
          },
        ],
      }
      this.echart.setOption(option)
    }
  }
}
</script>

<style scoped lang="less">
.echart {
  width: 100%;
  height: 100%;
}
</style>
